<script setup lang="ts">
import { ref, computed, nextTick } from "vue";
import type { Message } from "../../../types/message";
import type { Conversation } from "../../../types/conversation";
import { ElMessageBox } from "element-plus";
const conversations = ref<Conversation[]>([]);
const currentConversationId = ref<string | null>(null);
const messages = ref<Message[]>([]);
const inputMessage = ref("");
const isLoading = ref(false);
const messagesContainer = ref<HTMLElement | null>(null);

// 是否显示欢迎页面
const showWelcome = computed(() => {
  return messages.value.length === 0;
});

// 创建新对话
const createNewConversation = () => {
  const newConversation: Conversation = {
    id: Date.now().toString(),
    title: "新对话",
    messages: [],
    createdAt: new Date().toISOString(),
    updatedAt: new Date().toISOString(),
  };
  conversations.value.unshift(newConversation);
  currentConversationId.value = newConversation.id;
  messages.value = [];
};

// 选择对话
const selectConversation = (conversationId: string) => {
  currentConversationId.value = conversationId;
  const conversation = conversations.value.find(
    (c: Conversation) => c.id === conversationId
  );
  if (conversation) {
    messages.value = [...conversation.messages];
  }
};
// 删除对话
const deleteConversation = (conversationId: string, event: Event) => {
  event.stopPropagation();
  ElMessageBox.confirm("确定要删除这个对话吗?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      conversations.value = conversations.value.filter(
        (c: Conversation) => c.id !== conversationId
      );
      if (currentConversationId.value === conversationId) {
        currentConversationId.value = null;
        messages.value = [];
      }
    })
    .catch(() => {
      // 用户取消操作
    });
};

// 发送消息
const sendMessage = async () => {
  if (!inputMessage.value.trim() || isLoading.value) return;

  // 如果没有当前对话,创建一个新的
  if (!currentConversationId.value) {
    createNewConversation();
  }

  const userMessage: Message = {
    id: Date.now(),
    content: inputMessage.value,
    role: "user",
  };

  messages.value.push(userMessage);

  // 更新对话标题(使用第一条消息的内容)
  const conversation = conversations.value.find(
    (c: Conversation) => c.id === currentConversationId.value
  );
  if (conversation && conversation.messages.length === 0) {
    conversation.title =
      inputMessage.value.slice(0, 30) +
      (inputMessage.value.length > 30 ? "..." : "");
  }

  inputMessage.value = "";
  isLoading.value = true;

  // 滚动到底部
  await nextTick();
  scrollToBottom();

  // 模拟AI响应
  setTimeout(async () => {
    const assistantMessage: Message = {
      id: Date.now(),
      content: "这是一个模拟的回复。请根据实际需求接入后端API。",
      role: "assistant",
      status: "normal",
    };

    messages.value.push(assistantMessage);

    // 保存消息到对话
    if (conversation) {
      conversation.messages = [...messages.value];
      conversation.updatedAt = new Date().toISOString();
    }

    isLoading.value = false;
    await nextTick();
    scrollToBottom();
  }, 1000);
};

// 滚动到底部
const scrollToBottom = () => {
  if (messagesContainer.value) {
    messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight;
  }
};

// 格式化时间
const formatTime = (time: string) => {
  const date = new Date(time);
  const now = new Date();
  const diff = now.getTime() - date.getTime();

  if (diff < 60000) return "刚刚";
  if (diff < 3600000) return Math.floor(diff / 60000) + "分钟前";
  if (diff < 86400000) return Math.floor(diff / 3600000) + "小时前";
  if (diff < 604800000) return Math.floor(diff / 86400000) + "天前";

  return date.toLocaleDateString();
};
</script>

<template>
  <div class="chat-container">
    <!-- 侧边栏 -->
    <div class="sidebar">
      <div class="sidebar-header">
        <button class="new-chat-btn" @click="createNewConversation">
          <span class="icon">+</span>
          <span>新建对话</span>
        </button>
      </div>

      <div class="conversations-list">
        <div
          v-for="conversation in conversations"
          :key="conversation.id"
          class="conversation-item"
          :class="{ active: conversation.id === currentConversationId }"
          @click="selectConversation(conversation.id)"
        >
          <div class="conversation-info">
            <div class="conversation-details">
              <div class="conversation-title">{{ conversation.title }}</div>
              <div class="conversation-time">
                {{ formatTime(conversation.updatedAt) }}
              </div>
            </div>
          </div>
          <button
            class="delete-btn"
            @click="deleteConversation(conversation.id, $event)"
            title="删除对话"
          >
            ×
          </button>
        </div>
      </div>
    </div>

    <!-- 主内容区 -->
    <div class="main-content">
      <div class="chat-header">
        <h1>智能对话助手</h1>
      </div>

      <!-- 欢迎页面 -->
      <div v-if="showWelcome" class="welcome-screen">
        <div class="welcome-content">
          <h2>欢迎使用智能对话助手</h2>
          <p>你可以向我提问任何问题,我会尽力为你解答</p>
        </div>
      </div>

      <!-- 消息列表 -->
      <div v-else ref="messagesContainer" class="messages-container">
        <div
          v-for="message in messages"
          :key="message.id"
          class="message-wrapper"
          :class="message.role"
        >
          <div class="message-content">
            <div class="message-text">{{ message.content }}</div>
          </div>
        </div>

        <div v-if="isLoading" class="message-wrapper assistant">
          <div class="message-content">
            <div class="typing-indicator">
              <span></span>
              <span></span>
              <span></span>
            </div>
          </div>
        </div>
      </div>

      <!-- 输入区域 -->
      <div class="input-area">
        <div class="input-container">
          <textarea
            v-model="inputMessage"
            placeholder="输入你的问题..."
            @keydown.enter.prevent="sendMessage"
            :disabled="isLoading"
            rows="1"
          ></textarea>
          <button
            class="send-btn"
            @click="sendMessage"
            :disabled="!inputMessage.trim() || isLoading"
          >
            <span v-if="!isLoading">发送</span>
            <span v-else>...</span>
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.chat-container {
  display: flex;
  height: 100%;
  background: linear-gradient(135deg, #0a0e27 0%, #1a1f3a 50%, #0a0e27 100%);
  position: relative;
  overflow: hidden;
}

.sidebar {
  width: 260px;
  background: linear-gradient(
    135deg,
    rgba(49, 190, 255, 0.06) 0%,
    rgba(49, 190, 255, 0.02) 100%
  );
  backdrop-filter: blur(20px);
  border-right: 1px solid rgba(49, 190, 255, 0.2);
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
  box-shadow: 4px 0 16px rgba(0, 0, 0, 0.3);
}

.sidebar-header {
  padding: 16px;
  border-bottom: 1px solid rgba(49, 190, 255, 0.15);
}

.new-chat-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 16px;
  background: linear-gradient(
    135deg,
    rgba(49, 190, 255, 0.15) 0%,
    rgba(49, 190, 255, 0.08) 100%
  );
  border: 1px solid rgba(49, 190, 255, 0.3);
  border-radius: 8px;
  color: rgba(49, 190, 255, 0.9);
  font-size: 14px;
  font-family: "Alibaba PuHuiTi", sans-serif;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;

  .icon {
    font-size: 18px;
    font-weight: 300;
  }

  &:hover {
    background: linear-gradient(
      135deg,
      rgba(49, 190, 255, 0.25) 0%,
      rgba(49, 190, 255, 0.15) 100%
    );
    border-color: rgba(49, 190, 255, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(49, 190, 255, 0.3);
    color: #31beff;
  }

  &:active {
    transform: translateY(0);
  }
}

.conversations-list {
  flex: 1;
  overflow-y: auto;
  padding: 12px 8px;

  &::-webkit-scrollbar {
    width: 6px;
  }

  &::-webkit-scrollbar-thumb {
    background: rgba(49, 190, 255, 0.3);
    border-radius: 3px;

    &:hover {
      background: rgba(49, 190, 255, 0.5);
    }
  }

  &::-webkit-scrollbar-track {
    background: rgba(49, 190, 255, 0.05);
  }
}

.conversation-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  margin-bottom: 6px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
  color: rgba(246, 249, 254, 0.8);
  position: relative;
  background: rgba(49, 190, 255, 0.02);
  border: 1px solid transparent;

  &::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 60%;
    background: linear-gradient(90deg, rgba(49, 190, 255, 0.8), transparent);
    border-radius: 0 4px 4px 0;
    transition: width 0.3s ease;
  }

  &:hover {
    background: rgba(49, 190, 255, 0.08);
    color: rgba(246, 249, 254, 0.95);
    transform: translateX(4px);

    &::before {
      width: 3px;
    }
  }

  &.active {
    background: linear-gradient(
      135deg,
      rgba(49, 190, 255, 0.15) 0%,
      rgba(49, 190, 255, 0.08) 100%
    );
    color: #31beff;
    border-color: rgba(49, 190, 255, 0.3);
    box-shadow: 0 4px 12px rgba(49, 190, 255, 0.2);

    &::before {
      width: 3px;
    }
  }
}

.conversation-info {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.conversation-details {
  flex: 1;
  min-width: 0;
}

.conversation-title {
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: "Alibaba PuHuiTi", sans-serif;
}

.conversation-time {
  font-size: 12px;
  color: rgba(246, 249, 254, 0.5);
  margin-top: 2px;
}

.delete-btn {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: rgba(246, 249, 254, 0.4);
  font-size: 20px;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.3s ease;
  flex-shrink: 0;

  &:hover {
    background: rgba(255, 77, 77, 0.15);
    color: #ff4d4d;
    border: 1px solid rgba(255, 77, 77, 0.3);
  }
}

.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: rgba(10, 14, 39, 0.3);
  backdrop-filter: blur(10px);
  position: relative;
  z-index: 1;
}

.chat-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 24px;
  border-bottom: 1px solid rgba(49, 190, 255, 0.2);
  background: linear-gradient(
    135deg,
    rgba(49, 190, 255, 0.08) 0%,
    rgba(49, 190, 255, 0.03) 100%
  );
  backdrop-filter: blur(20px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);

  h1 {
    font-size: 18px;
    font-weight: 600;
    color: #f6f9fe;
    font-family: "YouSheBiaoTiHei", sans-serif;
    text-shadow: 0 2px 8px rgba(49, 190, 255, 0.3);
  }
}

.welcome-screen {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}

.welcome-content {
  text-align: center;
  max-width: 600px;
  padding: 40px;
  background: linear-gradient(
    135deg,
    rgba(49, 190, 255, 0.05) 0%,
    rgba(49, 190, 255, 0.02) 100%
  );
  backdrop-filter: blur(20px);
  border: 1px solid rgba(49, 190, 255, 0.2);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.welcome-content h2 {
  font-size: 28px;
  font-weight: 600;
  color: #f6f9fe;
  margin-bottom: 12px;
  font-family: "YouSheBiaoTiHei", sans-serif;
  text-shadow: 0 2px 8px rgba(49, 190, 255, 0.3);
}

.welcome-content p {
  font-size: 16px;
  color: rgba(246, 249, 254, 0.7);
  font-family: "Alibaba PuHuiTi", sans-serif;
}

.example-questions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}

.example-title {
  font-size: 14px;
  color: rgba(246, 249, 254, 0.6);
  margin-bottom: 8px;
  font-family: "Alibaba PuHuiTi", sans-serif;
}

.example-item {
  padding: 12px 24px;
  background: linear-gradient(
    135deg,
    rgba(49, 190, 255, 0.1) 0%,
    rgba(49, 190, 255, 0.05) 100%
  );
  border: 1px solid rgba(49, 190, 255, 0.3);
  border-radius: 10px;
  color: rgba(246, 249, 254, 0.9);
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 14px;
  font-family: "Alibaba PuHuiTi", sans-serif;

  &:hover {
    background: linear-gradient(
      135deg,
      rgba(49, 190, 255, 0.2) 0%,
      rgba(49, 190, 255, 0.1) 100%
    );
    border-color: rgba(49, 190, 255, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(49, 190, 255, 0.3);
    color: #31beff;
  }
}

.messages-container {
  flex: 1;
  overflow-y: auto;
  padding: 24px;

  &::-webkit-scrollbar {
    width: 8px;
  }

  &::-webkit-scrollbar-thumb {
    background: rgba(49, 190, 255, 0.3);
    border-radius: 4px;

    &:hover {
      background: rgba(49, 190, 255, 0.5);
    }
  }

  &::-webkit-scrollbar-track {
    background: rgba(49, 190, 255, 0.05);
  }
}

.message-wrapper {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
  animation: messageSlideIn 0.3s ease-out;

  @keyframes messageSlideIn {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  &.user {
    flex-direction: row-reverse;

    .message-content {
      background: linear-gradient(
        135deg,
        rgba(49, 190, 255, 0.25) 0%,
        rgba(49, 190, 255, 0.15) 100%
      );
      border: 1px solid rgba(49, 190, 255, 0.3);
      color: #f6f9fe;
      box-shadow: 0 4px 12px rgba(49, 190, 255, 0.2);
    }
  }

  &.assistant {
    .message-content {
      background: linear-gradient(
        135deg,
        rgba(49, 190, 255, 0.08) 0%,
        rgba(49, 190, 255, 0.03) 100%
      );
      border: 1px solid rgba(49, 190, 255, 0.2);
      color: rgba(246, 249, 254, 0.9);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    }
  }
}

.message-avatar {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 20px;
  flex-shrink: 0;
  transition: all 0.3s ease;

  &:hover {
    transform: scale(1.1);
  }
}

.message-content {
  max-width: 70%;
  padding: 14px 18px;
  border-radius: 12px;
  font-size: 15px;
  line-height: 1.6;
  word-wrap: break-word;
  font-family: "Alibaba PuHuiTi", sans-serif;
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(49, 190, 255, 0.25);
  }
}

.message-text {
  white-space: pre-wrap;
}

.typing-indicator {
  display: flex;
  gap: 4px;
  padding: 8px 0;

  span {
    width: 8px;
    height: 8px;
    background: rgba(49, 190, 255, 0.6);
    border-radius: 50%;
    animation: typing 1.4s infinite;
    box-shadow: 0 0 8px rgba(49, 190, 255, 0.4);

    &:nth-child(2) {
      animation-delay: 0.2s;
    }

    &:nth-child(3) {
      animation-delay: 0.4s;
    }
  }
}

@keyframes typing {
  0%,
  60%,
  100% {
    opacity: 0.3;
    transform: translateY(0);
  }
  30% {
    opacity: 1;
    transform: translateY(-8px);
  }
}

.input-area {
  padding: 20px 24px;
  border-top: 1px solid rgba(49, 190, 255, 0.2);
  background: linear-gradient(
    135deg,
    rgba(49, 190, 255, 0.05) 0%,
    rgba(49, 190, 255, 0.02) 100%
  );
  backdrop-filter: blur(20px);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.2);
}

.input-container {
  display: flex;
  gap: 12px;
  max-width: 900px;
  margin: 0 auto;
}

textarea {
  flex: 1;
  padding: 14px 18px;
  background: rgba(49, 190, 255, 0.05);
  border: 1px solid rgba(49, 190, 255, 0.3);
  border-radius: 10px;
  font-size: 15px;
  font-family: "Alibaba PuHuiTi", sans-serif;
  color: #f6f9fe;
  resize: none;
  min-height: 48px;
  max-height: 200px;
  transition: all 0.3s ease;
  outline: none;

  &::placeholder {
    color: rgba(246, 249, 254, 0.4);
  }

  &:focus {
    border-color: rgba(49, 190, 255, 0.6);
    background: rgba(49, 190, 255, 0.08);
    box-shadow: 0 0 0 3px rgba(49, 190, 255, 0.1),
      0 4px 12px rgba(49, 190, 255, 0.2);
  }

  &:disabled {
    background: rgba(49, 190, 255, 0.02);
    border-color: rgba(49, 190, 255, 0.15);
    cursor: not-allowed;
    color: rgba(246, 249, 254, 0.4);
  }
}

.send-btn {
  padding: 12px 28px;
  background: linear-gradient(
    135deg,
    rgba(49, 190, 255, 0.3) 0%,
    rgba(49, 190, 255, 0.2) 100%
  );
  border: 1px solid rgba(49, 190, 255, 0.4);
  color: #f6f9fe;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 500;
  font-family: "Alibaba PuHuiTi", sans-serif;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(49, 190, 255, 0.2);

  &:hover:not(:disabled) {
    background: linear-gradient(
      135deg,
      rgba(49, 190, 255, 0.4) 0%,
      rgba(49, 190, 255, 0.3) 100%
    );
    border-color: rgba(49, 190, 255, 0.6);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(49, 190, 255, 0.3);
    color: #31beff;
  }

  &:active:not(:disabled) {
    transform: translateY(0);
  }

  &:disabled {
    background: rgba(49, 190, 255, 0.05);
    border-color: rgba(49, 190, 255, 0.15);
    color: rgba(246, 249, 254, 0.3);
    cursor: not-allowed;
    box-shadow: none;
  }
}
</style>
